var solids = document.getElementsByClassName("solid")[0];
;
var carousel = document.getElementsByClassName("carousel")[0];
var solidTimes = document.getElementsByClassName("solid-time");
var width = carousel.clientWidth;

solids.append(solids.firstElementChild.cloneNode(true));

solids.style.width = width * solids.childElementCount + 'px';
for (var i = 0; i < solidTimes.length; i++) {
    solidTimes[i].style.width = width + 'px';
    solidTimes[i].style.height = carousel.clientHeight + 'px';
}

solids.style.transition = 'left 300ms linear';
var index = 0;
var timer;
function moveLeft() {
    index++;
    if (index === solidTimes.length - 1) {
        solids.style.left = -index * width + 'px';
        setTimeout(function () {
            solids.style.transition = '';
            index = 0;
            solids.style.left = -index * width + 'px';
            requestAnimationFrame(function () {
                solids.style.transition = 'left 300ms linear';
            })
        }, 300);
    } else {
        solids.style.left = -index * width + 'px';
    }
}

timer = setInterval(moveLeft, 3000);
